<template>
  <div class="recomend">
    <van-nav-bar v-if="changeSearch"
                 title="推荐"
                 :left-arrow='false'
                 :fixed=true>
      <van-icon name="search"
                slot="right"
                size=20
                @click="handleChangeSearch" />
    </van-nav-bar>
    <van-search v-else
                v-model="searchValue"
                placeholder="请输入搜索关键词"
                :show-action=true
                :action-text=false
                shape="round"
                clearable
                @search="handleSearch"
                @cancel="handleCancel">

    </van-search>
    <GoodsList />
  </div>
</template>

<script>
export default {
  name: 'recomend',
  data () {
    return {
      changeSearch: true,
      searchValue: '',
      imageList: [
        'https://img12.360buyimg.com/mobilecms/s140x140_jfs/t1/72565/37/9872/157245/5d775ab3Ef827c296/791c309ad672fa2c.png.webp',
        'https://img13.360buyimg.com/mobilecms/s140x140_jfs/t1/57244/5/9938/80296/5d71bc5fEdbe7d7f1/e12a150ace591686.png.webp',
        'https://img13.360buyimg.com/jdcms/s300x300_jfs/t1/28052/24/6184/422897/5c4ab977Ee44b0130/388394b5577cf7df.jpg.webp',
        'https://img.yzcdn.cn/vant/t-thirt.jpg',
        'https://img12.360buyimg.com/mobilecms/s140x140_jfs/t1/72565/37/9872/157245/5d775ab3Ef827c296/791c309ad672fa2c.png.webp',
        'https://img13.360buyimg.com/mobilecms/s140x140_jfs/t1/57244/5/9938/80296/5d71bc5fEdbe7d7f1/e12a150ace591686.png.webp',
        'https://img13.360buyimg.com/jdcms/s300x300_jfs/t1/28052/24/6184/422897/5c4ab977Ee44b0130/388394b5577cf7df.jpg.webp',
        'https://img.yzcdn.cn/vant/t-thirt.jpg',
        'https://img12.360buyimg.com/mobilecms/s140x140_jfs/t1/72565/37/9872/157245/5d775ab3Ef827c296/791c309ad672fa2c.png.webp',
        'https://img13.360buyimg.com/mobilecms/s140x140_jfs/t1/57244/5/9938/80296/5d71bc5fEdbe7d7f1/e12a150ace591686.png.webp',
        'https://img13.360buyimg.com/jdcms/s300x300_jfs/t1/28052/24/6184/422897/5c4ab977Ee44b0130/388394b5577cf7df.jpg.webp',
        'https://img.yzcdn.cn/vant/t-thirt.jpg',
        'https://img12.360buyimg.com/mobilecms/s140x140_jfs/t1/72565/37/9872/157245/5d775ab3Ef827c296/791c309ad672fa2c.png.webp',
        'https://img13.360buyimg.com/mobilecms/s140x140_jfs/t1/57244/5/9938/80296/5d71bc5fEdbe7d7f1/e12a150ace591686.png.webp',
        'https://img13.360buyimg.com/jdcms/s300x300_jfs/t1/28052/24/6184/422897/5c4ab977Ee44b0130/388394b5577cf7df.jpg.webp',
        'https://img.yzcdn.cn/vant/t-thirt.jpg',
        'https://img12.360buyimg.com/mobilecms/s140x140_jfs/t1/72565/37/9872/157245/5d775ab3Ef827c296/791c309ad672fa2c.png.webp',
        'https://img13.360buyimg.com/mobilecms/s140x140_jfs/t1/57244/5/9938/80296/5d71bc5fEdbe7d7f1/e12a150ace591686.png.webp',
        'https://img13.360buyimg.com/jdcms/s300x300_jfs/t1/28052/24/6184/422897/5c4ab977Ee44b0130/388394b5577cf7df.jpg.webp',
        'https://img12.360buyimg.com/jdcms/s300x300_jfs/t27091/115/2577132710/306881/247bd325/5c06243eN7edaa545.jpg.webp'
      ]
    }
  },
  components: {

  },
  methods: {
    /* 点击唤出输入框 */
    handleChangeSearch () {
      this.changeSearch = false;
    },
    /* 确定搜索时触发 */
    handleSearch () {
      /* 发起axios请求 */
      this.$toast('查询');
    },
    /* 点击取消 */
    handleCancel () {
      this.changeSearch = true;
    }
  }
}
</script>

<style scoped lang="css">
.recomend {
  height: 100vh;
  padding-top: 120px;
}
.van-search--show-action {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}
</style>
